import React, { useState, useEffect } from 'react';
import styles from './index.less';
// import Video from '@/components/content//monitor/video';
import { useSelector, useDispatch } from 'umi';
import { Select } from 'antd';

// import kls from 'classnames';
// import _cloneDeep from 'lodash/cloneDeep';

const { Option } = Select;

const VideoBlock = () => {
  // const [rawData] = useStatisticsData(); // 单一api中的值
  // const rawData = useSelector(store => store.projectPage.statisticsData);
  const dispatch = useDispatch();
  const videoList = useSelector(s => s.monitor.videoList);
  const curVideoId = useSelector(s => s.projectPage.curVideoId);
  // const [curVideo, setCurVideo] = useState();
  // const urlFromCameraLayer = useSelector(s => s.projectPage.urlFromCameraLayer);
  useEffect(() => {
    if (curVideoId || !videoList) {
      return;
    }
    let defaultVideoId = (videoList[0] && videoList[0].channelNo) || '';
    // dispatch({
    //   type: 'projectPage/updateState',
    //   payload: {
    //     curVideoId: defaultVideoId,
    //   },
    // });

    setTimeout(() => {
      dispatch({
        type: 'projectPage/updateState',
        payload: {
          curVideoId: defaultVideoId,
        },
      });
    }, 300);
  }, [curVideoId, videoList]);

  console.log(videoList);

  function handleChange(curVideoId) {
    dispatch({
      type: 'projectPage/updateState',
      payload: {
        curVideoId: curVideoId,
      },
    });
  }

  return (
    <div className={styles.box}>
      <div className={styles.boxHead}>
        <Select size={'small'} value={curVideoId} style={{ width: 120 }} onChange={handleChange}>
          {!!videoList &&
            !!videoList.length &&
            videoList.map(e => {
              return (
                <Option key={e.deviceName} value={e.channelNo}>
                  {e.deviceName}
                </Option>
              );
            })}
        </Select>
        <span
          onClick={() => {
            window.location.href = './monitorPage.html' + window.location.search;
          }}
          style={{ color: '#2FB0FF', cursor: 'pointer' }}
        >
          查看全部
        </span>
      </div>
      <div className={styles.boxBody}>
        {/* <Video
              options={{ width: '326px', height: '180px' }}
              // 视频的列表信息无法从图中获取
              url={urlFromCameraLayer || curVideo.liveAddress}
            /> */}
      </div>
    </div>
  );
};
export default VideoBlock;
